<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            width: 300px;
            padding: 15px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        select, button {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        button {
            background: #007bff;
            color: white;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            background: #0056b3;
        }

        .api-select {
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <select id="target-language" class="api-select">
                <option value="zh">中文</option>
                <option value="en">English</option>
                <option value="ja">日本語</option>
                <option value="ko">한국어</option>
                <option value="fr">Français</option>
                <option value="de">Deutsch</option>
            </select>
        </div>
        <div class="row">
            <select id="translation-api" class="api-select">
                <option value="libre">LibreTranslate</option>
                <option value="google">Google Translate</option>
                <option value="baidu">百度翻译</option>
            </select>
        </div>
        <button id="translate-page">翻译页面</button>
        <button id="translate-selection">划词翻译</button>
    </div>
    <script src="popup.js"></script>
</body>
</html>
